<script setup lang="ts">   
import {
    Edit,
    Delete,
    Search
} from '@element-plus/icons-vue'
import { id } from 'element-plus/es/locale/index.mjs';

import { ref } from 'vue'

// 数据-----------------------------
//导入token
import { useTokenStore } from '@/stores/token.ts';
const tokenStore = useTokenStore();

// 添加员工对话框
const dialogTableToUserAddVisible = ref(false)
// 员工详情信息对话框
const dialogTableToUserInfoVisible = ref(false)
// 更新员工信息
const updateEmployeeDialogVisible =  ref(false)
// 根据id删除员工对话框
const deleteEmployeeDialogVisible = ref(false)
let deleteEmployeeModel = ref({
    id:'',
    name:''
})


//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数

//用户搜索时选中的分类id
const employeeName = ref('')
//用户搜索时选中的发布状态
const status = ref('')

    //控制抽屉是否显示
    const visibleDrawer = ref(false)
    //添加员工表单数据模型
    const employeeModel = ref({
        id:'',  //主键id
        picture:'', //照片
        name: '',  //姓名
        username: '',   //用户名
        password: '',   //密码
        phone: '',  //手机号
        sex: '',    //性别
        idNumber:'',    //身份证号
        status:'',  //状态
        createTime:'',  //创建时间
        updateTime:'',  //更新时间
        createUser:'',  //创建人
        updateUser:''   //更新人
    })

    //员工列表数据模型
    const employeeList = ref([])

// 普通方法-----------------------------------------------
//当每页条数发生了变化，调用此函数
function onSizeChange(size:any){
    pageSize.value = size
    getEmployeeList()
}
//当前页码发生变化，调用此函数
function onCurrentChange(num:any){
    pageNum.value = num
    getEmployeeList()
}
//清空员工信息数据模型
function clearEmployeeModelFunction(){
    employeeModel.value.id = ''
    employeeModel.value.picture = ''
    employeeModel.value.name = ''
    employeeModel.value.username = ''
    employeeModel.value.password = ''
    employeeModel.value.phone = ''
    employeeModel.value.sex = ''
    employeeModel.value.idNumber = ''
    employeeModel.value.status = ''
    employeeModel.value.createTime = ''
    employeeModel.value.updateTime = ''
    employeeModel.value.createUser = ''
    employeeModel.value.updateUser = ''
}

// 刷新员工信息模型为 指定员工
function setAllEmployeeModelData(row:any){
    employeeModel.value.id = row.id
    employeeModel.value.picture = row.picture
    employeeModel.value.name = row.name
    employeeModel.value.username = row.username
    employeeModel.value.password = row.password
    employeeModel.value.phone = row.phone
    employeeModel.value.sex = row.sex
    employeeModel.value.idNumber = row.idNumber
    employeeModel.value.status = row.status
    employeeModel.value.createTime = row.createTime
    employeeModel.value.updateTime = row.updateTime
    employeeModel.value.createUser = row.createUser
    employeeModel.value.updateUser = row.updateUser
}


// 查看员工详情信息
function lookDetailedInfo(row:any){
    // console.log('查看员工详细信息:'+row.name);
    setAllEmployeeModelData(row)
    // 显示对话框
    dialogTableToUserInfoVisible.value = true
}

// 更新员工信息
function updateEmployeeInfo(row:any){
    // console.log("姓名："+row.name)
    setAllEmployeeModelData(row)
    updateEmployeeDialogVisible.value = true;
}
//上传成功的回调函数
function uploadSuccess(result:any){
    employeeModel.value.picture = result;
    console.log(result);
}

// 调用api ----------------------------------------------
import {employeeListService,updateEmployeeStatusService,deleteEmployeeByIdService,updateEmployeeService,addEmployeeService } from '@/api/employee.ts'
    // 1.获取员工列表数据
    async function getEmployeeList(){
        // 准备数据
        let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        employeeName: employeeName.value ? employeeName.value : null,
        status: status.value ? (status.value==='启用' ? 1 : 0) : null
    }
    let result = await employeeListService(params)
    //渲染视图
    total.value = result.total
    employeeList.value = result.data
    // console.log(employeeList.value);
    }

    // 2.开关更改员工状态
async function handleStatusChange(id: any) {
    await updateEmployeeStatusService(id)
    // 重新渲染视图
    getEmployeeList()

}

    // 3.根据id删除员工
    async function deleteEmployeeById(id:any){
        await deleteEmployeeByIdService(id)
        // 重新渲染视图
        getEmployeeList()
    }
    // 4.根据数据模型更新员工信息
    async function updateEmployeeUserService(){
       await updateEmployeeService(employeeModel.value)
       // 关闭对话框
       updateEmployeeDialogVisible.value = false
       // 重新渲染视图
       getEmployeeList()
    }
    // 5.添加员工
    async function addEmployeeUserService(){
        await addEmployeeService(employeeModel.value)
        // 关闭对话框
        dialogTableToUserAddVisible.value = false
        // 渲染视图
        getEmployeeList()   
    }

    // 渲染视图
    getEmployeeList()   

</script>

<!-- ************************************************************************************************** -->
<!-- ************************************************************************************************** -->
<template>
 
 <!-- 添加员工对话框 -->
<el-dialog v-model="dialogTableToUserAddVisible" title="添加员工" width="800">
    <table class="info-table">
      <tr>
        <th>照片:</th>
        <td>
            <el-form-item>

            <!-- 
                auto-upload:设置是否自动上传
                action:设置服务器接口路径
                name:设置上传的文件字段名
                headers:设置上传的请求头
                on-success:设置上传成功的回调函数
            -->

            <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
            action="/api/upload"
            name="file"
            :headers="{'Authorization':tokenStore.token}"
            :on-success="uploadSuccess"
            >
                <img v-if="employeeModel.picture" :src="employeeModel.picture" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <th>姓名:</th>
        <el-input v-model="employeeModel.name" placeholder="请输入姓名"></el-input>
      </tr>
      <tr>
        <th>用户名:</th>
        <el-input v-model="employeeModel.username" placeholder="请输入用户名"></el-input>
      </tr>
      <tr>
        <th>密码:</th>
        <el-input v-model="employeeModel.password" placeholder="请输入密码"></el-input>
      </tr>
      <tr>
        <th>手机号:</th>
        <el-input v-model="employeeModel.phone" placeholder="请输入手机号"></el-input>
      </tr>
      <tr>
        <th>性别:</th>
        <td>
        <select v-model="employeeModel.sex"  class="gender-select">
          <option value="0">男</option>
          <option value="1">女</option>
        </select>
      </td>
      </tr>
      <tr>
        <th>身份证号:</th>
        <el-input v-model="employeeModel.idNumber" placeholder="请输入身份证号"></el-input>
      </tr>
    </table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateEmployeeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addEmployeeUserService()">
          确定添加
        </el-button>
      </div>
    </template>
  </el-dialog>
 <!-- 更新员工信息 -->
 <el-dialog v-model="updateEmployeeDialogVisible" title="更新员工信息" width="800">
    <table class="info-table">
      <tr>
        <th>ID:</th>
        <td>{{ employeeModel.id }}</td>
      </tr>
      <tr>
        <th>照片:</th>
        <td>
            <el-form-item>

            <!-- 
                auto-upload:设置是否自动上传
                action:设置服务器接口路径
                name:设置上传的文件字段名
                headers:设置上传的请求头
                on-success:设置上传成功的回调函数
            -->

            <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
            action="/api/upload"
            name="file"
            :headers="{'Authorization':tokenStore.token}"
            :on-success="uploadSuccess"
            >
                <img v-if="employeeModel.picture" :src="employeeModel.picture" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <th>姓名:</th>
        <el-input v-model="employeeModel.name" placeholder="请输入姓名"></el-input>
      </tr>
      <tr>
        <th>密码:</th>
        <el-input v-model="employeeModel.password" placeholder="请输入密码"></el-input>
      </tr>
      <tr>
        <th>手机号:</th>
        <el-input v-model="employeeModel.phone" placeholder="请输入手机号"></el-input>
      </tr>
      <tr>
      <th>性别:</th>
      <td>
        <select v-model="employeeModel.sex"  class="gender-select">
          <option value="0">男</option>
          <option value="1">女</option>
        </select>
      </td>
    </tr>
      <tr>
        <th>身份证号:</th>
        <el-input v-model="employeeModel.idNumber" placeholder="请输入身份证号"></el-input>
      </tr>
    </table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateEmployeeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateEmployeeUserService()">
          确定更新
        </el-button>
      </div>
    </template>
  </el-dialog>

 <!-- 根据id删除员工对话框 -->
 <el-dialog
    v-model="deleteEmployeeDialogVisible"
    title="删除员工"
    width="500"
    align-center
  >
    <span>请确定是否删除员工：{{deleteEmployeeModel.name}}？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteEmployeeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteEmployeeById(deleteEmployeeModel.id);deleteEmployeeDialogVisible = false">
          确定删除
        </el-button>
      </div>
    </template>
  </el-dialog>

 <!-- 员工详情信息对话框 -->
 <el-dialog v-model="dialogTableToUserInfoVisible" title="员工详情信息" width="800">
    <table class="info-table">
      <tr>
        <th>ID:</th><td>{{ employeeModel.id }}</td>
      </tr>
      <tr>
        <th>照片:</th>
        <td>
            <img :src="employeeModel.picture" style="width: 100px;" />
        </td>
      </tr>
      <tr>
        <th>姓名:</th><td>{{ employeeModel.name }}</td>
      </tr>
      <tr>
        <th>用户名:</th><td>{{ employeeModel.username }}</td>
      </tr>
      <tr>
        <th>密码:</th><td>{{ employeeModel.password }}</td>
      </tr>
      <tr>
        <th>手机号:</th><td>{{ employeeModel.phone }}</td>
      </tr>
      <tr>
        <th>性别:</th><td>{{ employeeModel.sex === "0" ? '男' : '女' }}</td>
      </tr>
      <tr>
        <th>身份证号:</th><td>{{ employeeModel.idNumber }}</td>
      </tr>
      <tr>
        <th>状态:</th><td>{{ employeeModel.status === "1" ? '启用' : '禁用' }}</td>
      </tr>
      <tr>
        <th>创建时间:</th><td>{{ employeeModel.createTime.substring(0, 4) + '年' + employeeModel.createTime.substring(5, 7) + '月' + employeeModel.createTime.substring(8, 10) + '日' }}</td>
      </tr>
      <tr>
        <th>最近一次更新时间:</th><td>{{ employeeModel.updateTime.substring(0, 4) + '年' + employeeModel.updateTime.substring(5, 7) + '月' + employeeModel.updateTime.substring(8, 10) + '日' + ' ' + employeeModel.updateTime.substring(11, 19) }}</td>
      </tr>
      <tr>
        <th>创建人ID:</th><td>{{ employeeModel.createUser }}</td>
      </tr>
      <tr>
        <th>最近一次更新人ID:</th><td>{{ employeeModel.updateUser }}</td>
      </tr>
    </table>
  </el-dialog>

        <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>员工管理</span>
                <div class="extra">
                    <el-button type="primary" @click="clearEmployeeModelFunction();dialogTableToUserAddVisible = true">添加员工</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="员工姓名：">
                <el-input v-model="employeeName" placeholder="请输入员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="员工状态：">
                <el-select placeholder="请选择" v-model="status" style="width: 150px;">
                    <el-option label="禁用" value="禁用"></el-option>
                    <el-option label="启用" value="启用"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getEmployeeList">搜索</el-button>
                <el-button @click="employeeName = ''; status = ''">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="employeeList" style="width: 100%">
            <el-table-column label="员工姓名" width="200" prop="name"></el-table-column>
            <el-table-column label="照片">
                <template #default="{ row }">
                    <el-avatar :src="row.picture"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column label="性别">
                <template #default="{ row }">
                    {{ row.sex === "0" ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template #default="{ row }">
                    {{ row.createTime.substring(0,4) + '年' + row.createTime.substring(5,7) + '月' + row.createTime.substring(8,10) + '日' }}
                </template>
                 </el-table-column>
            <el-table-column label="最近一次更新时间" prop="updateTime">
                <template #default="{ row }">
                    {{ row.updateTime.substring(0,4) + '年' + row.updateTime.substring(5,7) + '月' + row.updateTime.substring(8,10) + '日' + ' ' + row.updateTime.substring(11,19) }}
                </template>
                </el-table-column>
            <el-table-column label="禁用/启用">
                <template #default="{ row }">
                    <el-switch
                        v-model="row.status"
                        active-value= "1"
                        inactive-value="0"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @change="handleStatusChange(row.id)"
                />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="{ row }">
                    <el-button :icon="Search" circle plain type="primary" @click="lookDetailedInfo(row)"></el-button>
                    <el-button :icon="Edit" circle plain type="primary" @click="updateEmployeeInfo(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteEmployeeModel.id=row.id;deleteEmployeeModel.name=row.name;deleteEmployeeDialogVisible = true"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

        <!-- todo 抽屉 -->
        
    </el-card>
</template>






<!-- ************************************************************************************************** -->
<!-- ************************************************************************************************** -->
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* 抽屉样式 */
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;

  th, td {
    padding: 10px;
    border: 1px solid #ccc;
  }

  th {
    background-color: #f2f2f2;
    text-align: left;
  }
}
// 性别选择下拉框样式
.gender-select {
  width: 100px; /* 设置宽度 */
  height: 35px; /* 设置高度 */
  padding: 5px 10px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  color: #333; /* 文字颜色 */
  background-color: #fff; /* 背景颜色 */
  border: 1px solid #ccc; /* 边框颜色 */
  border-radius: 4px; /* 圆角 */
  appearance: none; /* 移除默认箭头 */
  -webkit-appearance: none; /* 移除默认箭头（Safari） */
  -moz-appearance: none; /* 移除默认箭头（Firefox） */
}

.gender-select:focus {
  outline: none; /* 去掉聚焦时的轮廓线 */
  border-color: #5a98f7; /* 聚焦时的边框颜色 */
  box-shadow: 0 0 5px rgba(82, 152, 247, 0.5); /* 聚焦时的阴影效果 */
}
</style>
